<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>风云同行</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="http://cdn.amazeui.org/amazeui/2.7.2/css/amazeui.css">
    <link rel="stylesheet" href="/css/index.css">
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
</head>
<body>
<main id="app">
<header class="top-color am-cf " >
<div class="am-header">
   <div class="le-login">
       <a href="#">
           <img src="http://img.dpm.org.cn/Uploads/Picture/2017/03/28/s58d9fa235f62c.png" alt="故宫博物院">
       </a>
   </div>
   <div class="am-container clear">
       <ul class="am-nav am-nav-pills am-topbar-nav clear">
           <li><a href="#">首页</a></li>
           <li><a href="#">资讯</a></li>
           <li><a href="#">视频</a></li>
           <li><a href="#">讲座</a></li>
           <li><a href="#">博物馆</a></li>
       </ul>
   </div>
   <div class="ri-tools"><a href="#">
       <img src="http://img.dpm.org.cn/Public/static/themes/image/menu2.png" alt="">
   </a></div>
</div>
</header>
<nav class="container">
    <div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0">
        <ul class="am-slides">
            <li><img src="img/了缘紫砂壶网站_02.jpg" /></li>
            <li><img src="img/了缘紫砂壶网站_02.jpg" /></li>
        </ul>
    </div>
</nav>
<div class="am-g mian-container am-cf animated" v-bind:class="animates1">
    <div class="left am-u-lg-8">
       <div class="l-top">
           <img src="img/了缘紫砂壶网站_05.jpg" alt="">
       </div>
        <div class="l-buttom ">
         <div class="top am-u-lg-6">
             <img src="img/了缘紫砂壶网站_10.jpg" alt="">
         </div>
        <div class="buttom am-u-lg-6">
            <img src="img/了缘紫砂壶网站_12.jpg" alt="">
        </div>
        </div>

    </div>
    <div class="rigth am-u-lg-4 rigth-h">
        <img src="img/了缘紫砂壶网站_07.jpg" alt="">
    </div>
</div>
<div class="am-g mian-container am-cf animated " :class="animates2">
    <div class="left am-u-lg-9 am-cf" >
        <div class="top am-cf">
            <div class="left am-u-lg-7"><img src="img/了缘紫砂壶网站_16.jpg" alt=""></div>
            <div class="rigth am-u-lg-5 "><img src="img/了缘紫砂壶网站_18.jpg" alt=""></div>
        </div>
        <div class="buttom am-cf">
            <div class="left am-u-lg-7 am-cf">
                <div class="top"><img src="img/了缘紫砂壶网站_23.jpg" alt=""></div>
                <div class="buttom"><img src="img/了缘紫砂壶网站_27.jpg" alt=""></div>
            </div>
            <div class="rigth am-u-lg-5" id="rigth"><img src="img/了缘紫砂壶网站_24.jpg" alt=""></div>
        </div>
    </div>
    <div class="rigth1 am-u-lg-3 ">
        <div class="top"><img src="img/了缘紫砂壶网站_20.jpg" alt=""></div>
        <div class="buttom"><img src="img/了缘紫砂壶网站_28.jpg" alt=""></div>
    </div>
</div>
<div class="am-g mian-container am-cf animated" :class="animates4">
    <div class="left3 am-u-lg-3">
        <img src="img/了缘紫砂壶网站_32.jpg" alt="">
    </div>
    <div class="rigth3 am-u-lg-9">
        <ul class="am-avg-sm-3 ">
            <li><img  src="img/了缘紫砂壶网站_34.jpg" /></li>
            <li><img  src="img/了缘紫砂壶网站_35.jpg" /></li>
            <li><img  src="img/了缘紫砂壶网站_36.jpg"  /></li>
        </ul>
    </div>

</div>
<div class="am-g mian-container am-cf animated" :class="animates3">
    <img src="img/了缘紫砂壶网站_39.jpg" alt="">
</div>
<div class="am-g mian-container am-cf animated" :class="animates5">
    <div class="left4 am-u-lg-8 am-cf">
        <div class="left am-u-lg-6">
            <img src="img/了缘紫砂壶网站_41.jpg" alt="">
        </div>
        <div class="rigth am-u-lg-6">
            <img src="img/了缘紫砂壶网站_43.jpg" alt="">
        </div>
    </div>
    <div class="rigth4 am-u-lg-4 am-cf">
        <div class="top4 am-cf">
            <div class="left am-u-lg-6"><img src="img/了缘紫砂壶网站_45.jpg" alt=""></div>
            <div class="rigth am-u-lg-6"><img src="img/了缘紫砂壶网站_47.jpg" alt=""></div>
        </div>
        <div class="buttom4 am-cf">
            <div class="left am-u-lg-6"><img src="img/了缘紫砂壶网站_50.jpg" alt=""></div>
            <div class="rigth am-u-lg-6"><img src="img/了缘紫砂壶网站_51.jpg" alt=""></div>
        </div>
    </div>
</div>
<footer class="footer animated" :class="animates6">
   <div class="foo-h"></div>
    <div class="foo-h">
        <div class="am-container clear">
            <ul class="am-nav am-nav-pills am-topbar-nav clear">
                <li>首页</li>
                <li>资讯</li>
                <li>视频</li>
                <li>讲座</li>
                <li>博物馆</li>
            </ul>
        </div>
    </div>
    <div class="foo-h">
        COPYRIGHT © 2017 风云同舟. ALL RIGHTS RESERVED  京ICP备05067311号-1
    </div>
</footer>
<!--在这里编写你的代码-->
</main>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js"></script>

<![endif]-->
<script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
	        animates1:1,
	        animates2:1,
	        animates3:1,
	        animates4:1,
	        animates5:1,
	        animates6:1,
	        animates7:1,
	        animates8:1

        },
        methods:{
	        over(){
              this.animates1 = 'bounceOutLeft';
              this.animates2 = 'rubberBand';
              this.animates3 = 'flash';
              this.animates4 = 'pulse';
              this.animates5 = 'swing';
              this.animates6 = 'wobble';
              this.animates7 = 'jello';
              this.animates8 = 'rubberBand';

              setTimeout(function () {
	              app.animates1 = 'll';
	              app.animates2 = 'll';
	              app.animates3 = 'll';
	              app.animates4 = 'll';
	              app.animates5 = 'll';
	              app.animates6 = 'll';
	              app.animates7 = 'll';
	              app.animates8 = 'll';
              },3500);
            }
        }
    })


    window.onscroll = function () {
        app.over();
    }

</script>
</body>
</html>